@if (!$isLoading()) {
  @for (article of $articles(); track article.slug) {
    <cdt-article-list-item
      data-testid="article-list"
      (navigateToArticle)="navigateToArticle($event)"
      (unFavorite)="unFavorite($event)"
      (favorite)="favorite($event)"
      [article]="article"
    >
    </cdt-article-list-item>
  } @empty {
    <div>No articles are here... yet.</div>
  }

  <cdt-pager
    (setPage)="setPage($event)"
    [currentPage]="$listConfig.currentPage()"
    [totalPages]="$totalPages()"
  ></cdt-pager>
} @else {
  <div>Loading articles...</div>
}
